<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序简介 - HPAdmin</title>
    <link rel="stylesheet" href="./static/style.css">
    <style>
        #app {
            padding: 30px;
        }
        .el-card__body{
            padding:0 !important;
        }

        .steps-wrap {
            width: 900px;
            margin: 0 auto;
        }

        .card-wrap {
            margin-top: 30px;
        }

        .card-wrap .box-card {
            width: 900px;
            margin: 0 auto;
        }
        .card-wrap .box-card .clearfix {
            font-weight: 700;
        }

        .card-wrap .box-card .content {
            height: 500px;
            overflow-y: auto;
            border: 1px solid #e1e1e1;
            padding: 10px;
        }

        .card-wrap .box-card .content pre {
            overflow-x: hidden;
            margin: 0;
        }

        .card-wrap .box-card .action {
            padding: 10px 10px 10px 0;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="page">
            <div class="steps-wrap">
                <el-steps :active="steps.active" :space="200" finish-status="success" process-status="finish"
                    align-center>
                    <el-step v-for="(item,index) in steps.list" :key="index" :title="item.title"></el-step>
                </el-steps>
            </div>
            <div class="card-wrap">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>使用协议</span>
                    </div>
                    <div class="content">
                        <pre>{{agreement}}</pre>
                    </div>
                    <div class="action">
                        <el-button size="small" type="success" plain @click="openWin('/install/step1.html','next')">下一步</el-button>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
    <!-- 引入Vue -->
    <script src="./static/vue-2.6.14.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./static/element-ui@2.15.3.css">
    <!-- 引入组件库 -->
    <script src="./static/element-ui@2.15.3.js"></script>
    <script src="./static/axios.min.js"></script>
    <script>
        var _this;
        new Vue({
            el: '#app',
            data: function () {
                return {
                    loadingObj:'',
                    steps: {
                        active: 0,
                        list: [
                            {
                                title: '使用协议',
                            },
                            {
                                title: '环境检测',
                            },
                            {
                                title: '数据配置',
                            },
                            {
                                title: '开始安装',
                            },
                            {
                                title: '安装完成',
                            },
                        ],
                    },
                    agreement: '',
                }
            },
            created() {
                _this = this;
                _this.initify();
            },
            methods: {
                getData() {
                    axios.post('/')
                        .then(function (response) {
                            var res = response.data;
                            _this.agreement = res.data.content
                            _this.loadingObj.close();
                        })
                        .catch(function (error) {
                            _this.loadingObj.close();
                            console.log(error);
                        });
                },
                openWin(path,action){
                    window.location.href=path;
                },
                initify() {
                    _this.loadingObj = _this.$loading({
                        lock: true,
                        text: '正在加载中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255)'
                    });
                    _this.getData();
                },
            },
        })
    </script>
</body>

</html>